<template>
  <div class="cs-container">
    <MostExpected></MostExpected>
    <div class="seprator"></div>
    <div class="m-comingsoon-list">
      <div 
        v-for="value,index in filteredList.sortedArr"
        :key="value"
      >
        <h1>{{value | format}}</h1>
        <MovieList
          v-for="item in filteredList.newData[value]"
          :list="item"
          :key="item.id"
        ></MovieList>
      </div>
    </div>
  </div>
</template>

<script>
import {get} from '@u/http.js'
import _ from 'lodash'
import moment from 'moment'

import MostExpected from './MostExpected'
import MovieList from '@c/movielist/MovieList'

export default {
  data() {
    return {
      movieList: []
    }
  },

  filters: {
    format(value) {
      let date = moment(value).format('YYYY年MM月DD日')
      let day = '周' + ['日', '一', '二', '三', '四', '五', '六'][moment(value).day()]
      return date + ' ' + day
    }
  },

  components: {
    MovieList,
    MostExpected
  },

  async mounted() {
    let result = await get({
      url: '/api/mmdb/movie/v2/list/hot.json?limit=50&offset=10&ct=北京'
    })

    this.movieList = result.data.data.hot
  },

  computed: {
    filteredList() {
      let data = this.movieList.filter(value => {
        return value.showst === 3
      })

      let newData = _.groupBy(data, (value) => {
        return value.rt
      })

      let sortedArr = Object.keys(newData).sort().reverse()

      return {
        newData,
        sortedArr
      }
    }
  },
}
</script>

<style lang='stylus' scoped>
@import '~@a/stylus/ellipsis.styl'
@import '~@a/stylus/border.styl'
div.cs-container
  height 100%
  overflow-y scroll

  div.seprator
    height .1rem
    border_1px(1px 0 1px 0)
    background-color: #eee
    margin .05rem 0

  div.m-comingsoon-list
    padding-left .15rem
    h1
      height .4rem
      line-height .4rem
      font-weight normal
      font-size .16rem
</style>